<template>
	<view>
		
		<view class="headBox">
			
			<view class="title u-f-ajc">
				<text>完善个人信息</text>
			</view>
			
			<view class="subtitle u-f-ajc">
				<text>完善资料可以获得更好的互动体验</text>
			</view>
			
			<view class="headPic u-f-ajc">
				<u-avatar :src="avatar" size="180rpx"></u-avatar>
				
				<view class="upload">
					<u-upload
						@afterRead="afterRead"
						name="avatar"
						:maxCount="1"
						accept="image"
						:maxSize="2048576"
					>
						<image src="/static/img/upload.png" 
							mode="widthFix" style="width: 30px;height: 30px;"></image>
					</u-upload>
				</view>
			</view>
			
		</view>
		
		
		<view class="formBox">
			
			<u--form
				labelPosition="top"
				:model="form"
				labelWidth="auto"
				:labelStyle="{color:'#4E4C56',fontSize:'28rpx'}"
				ref="form"
			>
				<u-form-item
					label="个性昵称 :"
					prop="form.nickname"
					:borderBottom="false"
					ref="nickname"
				>
					<view class="input u-f-ac">
						<u--input
							v-model="form.nickname"
							border="none"
							placeholder="请输入您的个性昵称"
						></u--input>
					</view>
					
				</u-form-item>
				
				<u-form-item
					label="人生格言 :"
					prop="form.sign"
					:borderBottom="false"
					ref="sign"
				>
					<view class="input u-f-ac">
						<u--input
							v-model="form.sign"
							border="none"
							placeholder="请输入个性签名"
						></u--input>
					</view>
				</u-form-item>
				
			</u--form>
			
			<view class="submit">
				<u-button :disabled="disabled" :loading="loading" @click="wanshan" shape="circle" type="primary">提交</u-button>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import { profile } from '@/http/api'
	
	export default {
		data() {
			return {
				form:{
					nickname:'',
					sign:'',
					avatar:''
				},
				avatar:'',
				disabled:true,
				loading:false
			}
		},
		mounted() {
			this.avatar = this.userinfo.avatar
			this.form.avatar = this.userinfo.head
			this.form.nickname = this.userinfo.nickname
			this.form.sign = this.userinfo.bio
		},
		watch:{
			'form.nickname'(){
				if(this.form.nickname.length>=2){
					this.disabled = false
				}else{
					this.disabled = true
				}
			}
		},
		methods: {
			// 完善资料提交
			async wanshan(){
				this.loading = true
				let res = await profile(this.form);
				if(res.code){
					this.setUserInfo(res.data.userinfo)
					uni.switchTab({
						url:'/pages/home/home'
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				this.loading = false
			},
			async afterRead(e){
				uni.showLoading({title:'上传中...',mask:true})
				let res = await this.uploadFileHead(e.file.url)
				if(res.code==1){
					this.avatar = res.data.fullurl
					this.form.avatar = res.data.url
				}
				uni.hideLoading()
				
				uni.showToast({
					title:res.msg,
					icon:res.code?'success':'error'
				})
			}
		}
	}
</script>

<style>
page{
	background-color: white;
}
</style>
<style scoped lang="scss">
.headBox{
	padding: 40rpx 0;
	.title{
		font-size: 38rpx;
	}
	.subtitle{
		font-size: 28rpx;
		color: #CDCDCD;
		margin: 20rpx 0;
	}
	.headPic{
		margin: 0 auto;
		margin-top: 60rpx;
		position: relative;
		width: 180rpx;
		height: 180rpx;
		background-color: #f8f8f8;
		border-radius: 180rpx;
		.upload{
			position: absolute;
			bottom: 0;
			right: 0;
			z-index: 1;
		}
	}
}
.formBox{
	margin-top: 30rpx;
	padding: 0 50rpx;
	.input{
		margin-top: 10rpx;
		background: #FAFAFB;
		height: 100rpx;
		width: 570rpx;
		padding: 0 40rpx;
		border-radius: 15rpx;
	}
	.submit{
		margin-top: 100rpx;
		padding: 0 150rpx;
	}
}
</style>